import {
    useEffect,
    useState
} from 'react'
import useTitle from '@/hooks/useTitle'
import {
    chat
} from '@/llm'
import styles from './trip.module.css'
import {
    Input,
    Button,
    Loading,
    Toast
} from 'react-vant'
import {
    ChatO,
    UserO
} from '@react-vant/icons'

const Trip = () => {
    useTitle('旅游智能客服')
    const [text, setText] = useState('')
    const [isSending, setIsSending] = useState(false)
    // 数据驱动界面
    const [messages, setMessages] = useState([
        {
            id: 2,
            content: '你好',
            role: 'user'
        },
        {
            id: 1,
            content: 'hello,I am a assistant',
            role: 'assistant'
        }
    ])

    const handleChat = async () => {
        if (text.trim() === '') {
            Toast.info('请输入内容')
            return
        }
        setIsSending(true)
        setMessages(prev => {
            return [
                ...prev,
                {
                    role: 'user',
                    content: text
                }
            ]
        })
        const newMessage = await chat([{
            role: 'user',
            content: text,
        }])
        setMessages(prev => {
            return [
                ...prev,
                newMessage.data
            ]
        })
        setIsSending(false)
        setText('')
    }
    return (
        <div className='flex flex-col h-all'>
            <div className={`flex-1 ${styles.chatArea}`}>
                {
                    messages.map((msg, index) => (
                        <div
                            key={index}
                            className={
                                msg.role === 'user' ?
                                    styles.messageRight :
                                    styles.messageLeft
                            }
                        >
                            {
                                msg.role === 'assistant' ?
                                    <ChatO /> :
                                    <UserO />
                            }
                            {msg.content}
                        </div>
                    ))
                }
            </div>
            <div className={`flex ${styles.inputArea}`}>
                <Input
                    value={text}
                    onChange={(e) => setText(e)}
                    placeholder='请输入'
                    className={`flex-1 ${styles.input}`}
                />
                <Button
                    disabled={isSending}
                    type='primary'
                    onClick={handleChat}
                >
                    发送
                </Button>
            </div>
            {isSending && (<div className='fixed-loading'><Loading type='ball' /></div>)}
        </div>
    )
}

export default Trip